<template>
  <div style="overflow: hidden">
    <div class="title" @click="gkdetails">概况总览</div>

    <div class="left">
      <div class="left-item" v-for="(item, index) in left" :key="index">
        <span class="desc">{{ item.title }}</span>
        <el-row>
          <el-col :span="8" v-for="(item2, index2) in item._data" :key="index2">
            <p class="name">{{ item2.name }}</p>
            <span class="value">{{ item2.value }}</span>
            <span class="type">{{ item2.type }}</span>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="right">
      <span class="descr">{{ right.title }}</span>
      <el-row>
        <el-col :span="24" v-for="(item, index) in right._data" :key="index">
          <p class="name">{{ item.name }}</p>
          <span class="value">{{ item.value }}</span>
          <span class="type">{{ item.type }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getGeneralSituation } from "../../utils/api";
export default {
  name: "overview",
  data() {
    return {
      left: [
        {
          title: "人口",
          _data: [
            {
              name: "户籍",
              value: "40.5",
              type: "个",
            },
            {
              name: "流动",
              value: "0.9",
              type: "个",
            },
            {
              name: "重点人口",
              value: "22",
              type: "个",
            },
          ],
        },
        {
          title: "房屋",
          _data: [
            {
              name: "自住",
              value: "4.0",
              type: "个",
            },
            {
              name: "出租",
              value: "2768",
              type: "个",
            },
            {
              name: "重点场所",
              value: "264",
              type: "个",
            },
          ],
        },
      ],
      right: {
        title: "网格",
        _data: [
          {
            name: "数量",
            value: "784",
            type: "个",
          },
          {
            name: "一长三员",
            value: "3854",
            type: "个",
          },
        ],
      },
    };
  },
  mounted() {
    let me = this;
    getGeneralSituation().then((res) => {
      if (res.data.status === 200) {
        me.left[0]._data[0].value = res.data.data.householdstaffs;
        me.left[0]._data[1].value = res.data.data.floatingpopulations;
        me.left[0]._data[2].value = res.data.data.keypersonnel;
        me.left[1]._data[0].value = res.data.data.selfliving;
        me.left[1]._data[1].value = res.data.data.leaseliving;
        me.left[1]._data[2].value = res.data.data.keysites;

        me.right._data[0].value = res.data.data.villageprofiles;
        me.right._data[1].value = res.data.data.leaderteams;
      }
    });
  },
  methods: {
    gkdetails() {
      window.gkdetailsInit();
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 300px;
  height: 60px;
  background-image: url("../../assets/image/global/title.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  font-size: 24px;
  font-style: oblique;
  color: #fff;
  padding-left: 40px;
  cursor: pointer;
}
.left {
  width: 67%;
  float: left;
  color: #fff;
  font-size: 17px;
  margin-left: 10px;
}
.left-item {
  width: 100%;
  height: 100px;
  background-image: url("../../assets/image/left/overviewl.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  position: relative;
}
.desc {
  font-size: 20px;
  position: absolute;
  top: -7px;
  left: 60px;
  display: inline-block;
}
.el-col-8 {
  margin-top: 20px;
}
.el-col-8:nth-child(1) {
  padding-left: 20px;
}
.value {
  color: #fedc85;
  font-size: 22px;
}
.type {
  font-size: 15px;
}
.right {
  position: relative;
  width: 25%;
  height: 210px;
  margin-right: 10px;
  margin-top: 10px;
  float: right;
  background-image: url("../../assets/image/left/overviewr.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 17px;
}
.descr {
  font-size: 20px;
  width: 10px;
  line-height: 25px;
  position: absolute;
  top: 100px;
}
.el-col-24 {
  height: 100px;
  padding-top: 15px;
  padding-left: 35px;
  line-height: 40px;
}
</style>
